import React from "react";
import {
	Chart,
	Interval,
	Tooltip,
	Axis,
	Coordinate,
	getTheme,
} from "bizcharts";


class EcsType extends React.Component {
    render() {
        const data = [
            { item: "阿里云", percent: 0.4 },
            { item: "腾讯云", percent: 0.21 },
            { item: "京东云", percent: 0.17 },
            { item: "拼多多云", percent: 0.13 },
            { item: "物理机", percent: 0.09 },
            { item: "虚拟机", percent: 0.09 },
        ];
        const colors = data.reduce((pre, cur, idx) => {
            pre[cur.item] = getTheme().colors10[idx];
            return pre;
        }, {});

        const cols = {
            percent: {
                formatter: (val) => {
                    val = val * 100 + "%";
                    return val;
                },
            },
        };

        return (
            <Chart height={300} data={data} scale={cols} interactions={['element-active']} autoFit>
                <Coordinate type="theta" radius={0.75} />
                <Tooltip showTitle={false} />
                <Axis visible={false} />
                <Interval
                    position="percent"
                    adjust="stack"
                    color="item"
                    style={{
                        lineWidth: 1,
                        stroke: "#fff",
                    }}
                    label={[
                        "item",
                        (item) => {
                            return {
                                offset: 20,
                                content: (data) => {
                                    return `${data.item}\n ${data.percent * 100}%`;
                                },
                                style: {
                                    fill: colors[item],
                                },
                            };
                        },
                    ]}
                />
            </Chart>
        );
    }
}

export default EcsType;
